// vue.config.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

module.exports = {
  // plugins: [new MiniCssExtractPlugin({allChunks: false})],
  publicPath: isProduction ? './' : '/',
  chainWebpack: config => {
    //发布模式
    config.when(isProduction, config => {
      config.plugin('html').tap(args => {
        //添加参数isProd
        args[0].isProd = true
        args[0].title = 'Music'
        return args
      })
      //entry找到默认的打包入口，调用clear则是删除默认的打包入口
      //add添加新的打包入口
      config.entry('app').clear().add('./src/main-prod.js')

      //使用externals设置排除项
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        vuex: 'Vuex',
        normalize: 'normalize.css'
      })
    })
    //开发模式
    config.when(!isProduction, config => {
      config.plugin('html').tap(args => {
        //添加参数isProd
        args[0].isProd = false
        args[0].title = 'Music'
        return args
      })
      config.entry('app').clear().add('./src/main-dev.js')
    })
    // 添加别名
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('~@', path.resolve(__dirname, 'src'))
  },
  configureWebpack: config => {
    // 生产环境相关配置
    if (isProduction) {
      //gzip压缩
      const productionGzipExtensions = ['html', 'js', 'css']
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false // 删除原文件
        })
      )
    }
  }
}
